<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>药品管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #E8EAF6 0%, #F3E5F5 50%, #FCE4EC 100%);
            min-height: 100vh;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .medicine-card {
            transition: all 0.3s;
        }

        .medicine-card:active {
            transform: scale(0.98);
        }

        .category-tag {
            transition: all 0.3s;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-slide-in {
            animation: slideIn 0.4s ease-out;
        }

        /* 手机状态栏占位 */
        .status-bar-spacer {
            height: 28px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            position: relative;
            z-index: 999;
        }
    </style>
</head>

<body>
    <!-- 手机状态栏占位 -->
    <div class="status-bar-spacer"></div>

    <div class="min-h-screen pb-24">
        <!-- 顶部搜索栏 -->
        <div class="glass-card px-5 py-4">
            <div class="flex items-center gap-3 mb-3">
                <button onclick="history.back()"
                    class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-arrow-left text-gray-700"></i>
                </button>
                <h1 class="text-lg font-bold text-gray-900 flex-1">药品管理</h1>
                <button class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-sliders-h text-gray-700"></i>
                </button>
            </div>

            <div class="relative">
                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                <input type="text" placeholder="搜索药品名称或症状..."
                    class="w-full pl-12 pr-4 py-3 bg-white rounded-2xl border-2 border-gray-100 text-sm focus:outline-none focus:border-purple-300 transition-all">
            </div>
        </div>

        <!-- 分类标签 -->
        <div class="px-5 py-4 flex gap-2 overflow-x-auto scrollbar-hide">
            <button
                class="category-tag px-5 py-2.5 bg-black text-white rounded-full text-sm font-semibold whitespace-nowrap shadow-lg">
                全部 (24)
            </button>
            <button
                class="category-tag px-5 py-2.5 bg-white text-gray-700 rounded-full text-sm font-semibold whitespace-nowrap shadow-sm">
                常用药 (8)
            </button>
            <button
                class="category-tag px-5 py-2.5 bg-white text-gray-700 rounded-full text-sm font-semibold whitespace-nowrap shadow-sm">
                处方药 (6)
            </button>
            <button
                class="category-tag px-5 py-2.5 bg-white text-gray-700 rounded-full text-sm font-semibold whitespace-nowrap shadow-sm">
                保健品 (5)
            </button>
            <button
                class="category-tag px-5 py-2.5 bg-white text-gray-700 rounded-full text-sm font-semibold whitespace-nowrap shadow-sm">
                外用药 (5)
            </button>
        </div>

        <!-- 数据概览 -->
        <div class="px-5 mb-4">
            <div class="glass-card rounded-3xl p-5 shadow-lg">
                <div class="grid grid-cols-4 gap-3 text-center">
                    <div>
                        <div
                            class="w-12 h-12 mx-auto mb-2 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-pills text-white"></i>
                        </div>
                        <div class="text-xl font-bold text-gray-900">18</div>
                        <div class="text-xs text-gray-500">总数</div>
                    </div>
                    <div>
                        <div
                            class="w-12 h-12 mx-auto mb-2 bg-gradient-to-br from-red-400 to-rose-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-exclamation text-white"></i>
                        </div>
                        <div class="text-xl font-bold text-gray-900">2</div>
                        <div class="text-xs text-gray-500">低库存</div>
                    </div>
                    <div>
                        <div
                            class="w-12 h-12 mx-auto mb-2 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-clock text-white"></i>
                        </div>
                        <div class="text-xl font-bold text-gray-900">1</div>
                        <div class="text-xs text-gray-500">将过期</div>
                    </div>
                    <div>
                        <div
                            class="w-12 h-12 mx-auto mb-2 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-star text-white"></i>
                        </div>
                        <div class="text-xl font-bold text-gray-900">6</div>
                        <div class="text-xs text-gray-500">常用</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 过期提醒 -->
        <div class="px-5 mb-4">
            <div
                class="bg-gradient-to-r from-red-100 to-orange-100 border-2 border-red-200 rounded-3xl p-4 flex items-center gap-3 shadow-lg">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm">
                    <span class="text-2xl">⚠️</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-bold text-red-900">过期提醒</div>
                    <div class="text-xs text-red-700">维生素C咀嚼片将在1个月内过期</div>
                </div>
            </div>
        </div>

        <!-- 药品列表 -->
        <div class="px-5 space-y-3">
            <div class="medicine-card animate-slide-in glass-card rounded-3xl p-4 shadow-lg flex items-center gap-4">
                <div
                    class="w-16 h-16 bg-gradient-to-br from-green-100 to-emerald-100 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm">
                    <span class="text-3xl">💊</span>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-bold text-gray-900 mb-1">布洛芬缓释胶囊</h3>
                    <p class="text-xs text-gray-500 mb-2">解热镇痛 · 0.3g×20粒</p>
                    <div class="flex items-center gap-3 text-xs">
                        <span class="px-2 py-1 bg-green-100 text-green-700 rounded-lg font-medium">库存: 15粒</span>
                        <span class="text-gray-400">2025-12-31</span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button
                        class="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-100 transition-colors shadow-sm">
                        <i class="fas fa-edit text-sm"></i>
                    </button>
                </div>
            </div>

            <div class="medicine-card animate-slide-in glass-card rounded-3xl p-4 shadow-lg flex items-center gap-4"
                style="animation-delay: 0.1s">
                <div
                    class="w-16 h-16 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm">
                    <span class="text-3xl">🧪</span>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-bold text-gray-900 mb-1">复方感冒灵颗粒</h3>
                    <p class="text-xs text-gray-500 mb-2">感冒用药 · 10g×9袋</p>
                    <div class="flex items-center gap-3 text-xs">
                        <span class="px-2 py-1 bg-green-100 text-green-700 rounded-lg font-medium">库存: 6袋</span>
                        <span class="text-gray-400">2024-08-15</span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button
                        class="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-100 transition-colors shadow-sm">
                        <i class="fas fa-edit text-sm"></i>
                    </button>
                </div>
            </div>

            <div class="medicine-card animate-slide-in glass-card rounded-3xl p-4 shadow-lg flex items-center gap-4"
                style="animation-delay: 0.2s">
                <div
                    class="w-16 h-16 bg-gradient-to-br from-purple-100 to-pink-100 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm">
                    <span class="text-3xl">💉</span>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-bold text-gray-900 mb-1">盐酸左氧氟沙星片</h3>
                    <p class="text-xs text-gray-500 mb-2">抗生素 · 0.1g×12片</p>
                    <div class="flex items-center gap-3 text-xs">
                        <span class="px-2 py-1 bg-red-100 text-red-700 rounded-lg font-medium">⚠️ 库存: 2片</span>
                        <span class="text-gray-400">2025-05-20</span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button
                        class="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-100 transition-colors shadow-sm">
                        <i class="fas fa-edit text-sm"></i>
                    </button>
                </div>
            </div>

            <div class="medicine-card animate-slide-in glass-card rounded-3xl p-4 shadow-lg flex items-center gap-4"
                style="animation-delay: 0.3s">
                <div
                    class="w-16 h-16 bg-gradient-to-br from-amber-100 to-yellow-100 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm">
                    <span class="text-3xl">🍬</span>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-bold text-gray-900 mb-1">维生素C咀嚼片</h3>
                    <p class="text-xs text-gray-500 mb-2">保健品 · 100mg×60片</p>
                    <div class="flex items-center gap-3 text-xs">
                        <span class="px-2 py-1 bg-green-100 text-green-700 rounded-lg font-medium">库存: 45片</span>
                        <span class="text-red-600 font-medium">⏰ 2024-05-31</span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button
                        class="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-100 transition-colors shadow-sm">
                        <i class="fas fa-edit text-sm"></i>
                    </button>
                </div>
            </div>

            <div class="medicine-card animate-slide-in glass-card rounded-3xl p-4 shadow-lg flex items-center gap-4"
                style="animation-delay: 0.4s">
                <div
                    class="w-16 h-16 bg-gradient-to-br from-teal-100 to-cyan-100 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm">
                    <span class="text-3xl">🩹</span>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-bold text-gray-900 mb-1">盐酸小檗碱片</h3>
                    <p class="text-xs text-gray-500 mb-2">消化系统 · 0.1g×100片</p>
                    <div class="flex items-center gap-3 text-xs">
                        <span class="px-2 py-1 bg-green-100 text-green-700 rounded-lg font-medium">库存: 85片</span>
                        <span class="text-gray-400">2025-08-20</span>
                    </div>
                </div>
                <div class="flex gap-2">
                    <button
                        class="w-10 h-10 bg-blue-50 text-blue-600 rounded-xl hover:bg-blue-100 transition-colors shadow-sm">
                        <i class="fas fa-edit text-sm"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 悬浮添加按钮 -->
        <a href="add_medicine.html"
            class="fixed bottom-28 right-5 w-16 h-16 bg-black rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-transform">
            <i class="fas fa-plus text-white text-xl"></i>
        </a>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 glass-card px-5 py-3 border-t border-gray-100">
        <div class="flex items-center justify-around">
            <a href="index.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-home"></i>
                </div>
                <span class="text-xs font-medium">首页</span>
            </a>
            <a href="medicine_management.html" class="flex flex-col items-center gap-1 text-purple-600">
                <div
                    class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-pills text-white"></i>
                </div>
                <span class="text-xs font-semibold">药品</span>
            </a>
            <a href="add_medicine.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-plus-circle"></i>
                </div>
                <span class="text-xs font-medium">添加</span>
            </a>
            <a href="reminder.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-bell"></i>
                </div>
                <span class="text-xs font-medium">提醒</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-user"></i>
                </div>
                <span class="text-xs font-medium">我的</span>
            </a>
        </div>
    </div>

    <script>
        // 分类切换
        document.querySelectorAll('.category-tag').forEach(btn => {
            btn.addEventListener('click', function () {
                document.querySelectorAll('.category-tag').forEach(b => {
                    b.classList.remove('bg-black', 'text-white', 'shadow-lg');
                    b.classList.add('bg-white', 'text-gray-700', 'shadow-sm');
                });
                this.classList.remove('bg-white', 'text-gray-700', 'shadow-sm');
                this.classList.add('bg-black', 'text-white', 'shadow-lg');
            });
        });
    </script>
</body>

</html>